<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" isELIgnored="false">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" isELIgnored="false">

<head>
    <meta charset="UTF-8">

    <script type="text/javascript" src="js/jquery.js"></script>
    <link href="http://java.sun.com/jsp/jstl/core" >
    <title>用户查询</title>
    <style type="text/css">
        .table1{
            width: 50%;
        }
        thead{
            color: #110b0c;
            background-color: #bfd660;
            font-size: 15px;
        }
        td {
            border: 0px solid #d0d0d0;
            color: #404060;
            padding: 20px;
            text-align: center;
        }
        .aaa{
            margin: 5% 0 50% auto; /* 定宽块级元素的水平居中通过设置左右margin为auto来实现*/
            width: 79.5%;
            background: rgba(0, 0, 0, 0.01);
            padding: 20px;
            color: #0c70ff;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>
<body style="text-align: center;">
<nav class="navbar navbar-expand-sm bg-light">
    <ul class="navbar-nav" >
        <li class="nav-item">
            <a class="nav-link" href="/aaa">首页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/adminDoUser">用户信息</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/mainPage">货物信息</a>
        </li>

    </ul>
</nav>

<table class="table1" style="margin: auto;" frame="box" cellspacing="0" >
    <div style="width: 73.5%;height: 40px">
        <!--/*@thymesVar id="content" type=""*/-->
        <input id="query_content" type="text" placeholder="请输入用户名"  th:value="${content}" style="height: 30px;width:300px;">
        <button type="button"  onclick="queryByLike();" style="height:40px;width: 50px;">搜索</button>
    </div>
    <thead>
    <tr >
        <th>用户编号 </th>
        <th>用户姓名 </th>
        <th>用户密码 </th>
        <th>用户年龄 </th>
        <th>用户性别 </th>
        <th>操作1</th>
        <th>操作2</th>
    </tr>
    </thead>
    <tbody id="tb">
    <tr th:each="user : ${pageBean.lists}" >
        <td th:text="${user.user_id}"     ></td>
        <td th:text="${user.user_name}"   ></td>
        <td th:text="${user.user_password}"></td>
        <td th:text="${user.user_age}"></td>
        <td th:text="${user.user_sex}"></td>
        <td ><a th:href="'userDelete?user_id='+${user.user_id}" ><button style="border: none ">删除</button></a></td>
        <td ><a th:href="${'userEdit?user_id='+user.user_id}"><button style="border: none ">修改</button></a></td>
    </tr>
    </tbody>
</table>
<div class="aaa">
    <div class="container" >
        <ul class="pagination ">
            <li class="page-item"><a class="page-link" th:href="${'adminDoUser?currentPage='+1}">首页</a></li>
            <li class="page-item"><a class="page-link" th:href="'adminDoUser?currentPage='+${pageBean.currPage-1}"><<</a></li>
            <li class="page-item"><a class="page-link" th:href="${'adminDoUser?currentPage='+1}">1</a></li>
            <li class="page-item "><a class="page-link" th:href="${'adminDoUser?currentPage='+2}">2</a></li>
            <li class="page-item"><a class="page-link" th:href="${'adminDoUser?currentPage='+3}">3</a></li>
            <li class="page-item"><a class="page-link">...</a></li>
            <li class="page-item"><a class="page-link" th:href="'adminDoUser?currentPage='+${pageBean.currPage+1}">>></a></li>
            <li class="page-item"><a class="page-link" th:href="'adminDoUser?currentPage='+${pageBean.totalPage}">末页</a></li>
            <li class="page-item"><a class="page-link">共&nbsp;<span th:text="${pageBean.totalPage}"></span>&nbsp;页</a></li>
            <li class="page-item"><a class="page-link">当前第<span th:text="${pageBean.currPage}"></span>页</a></li>
            <li class="page-item"><a class="page-link" style="height: 38px" >跳转到第<input  size="3"   type="text" id="ww" name="gotoPageNo" th:value="${qq}">页</a></li>
            <li class="page-item"><a class="page-link" onclick="last()">确认</a></li>
            <li class="page-item"><a class="page-link" href="javascript:history.back(-1)">返回</a></li>
        </ul>
    </div>

</div>

</body>
<script type="text/javascript">

    function queryByLike(){//搜索
        var content = document.getElementById("query_content").value;
        window.location.href="selectUserByLike?content="+content;
    }
    function last() {//跳转到第几页
        var value = document.getElementById("ww").value;
        window.location.href="adminDoUser?currentPage="+value;
    }
    //鼠标点击行变色
    var tb = document.getElementById('tb');
    tb.onmouseover = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = '#d6d5b4'
    }

    tb.onmouseout = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = ''
    }


    var ts = document.getElementById('ts');
    ts.onmouseover = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = '#d6d5b4'
    }

    ts.onmouseout = function(ev){
        // 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
        // console.log(ev.target);
        // 注意，触发事件的是 td  ，而我们需要让tr改变背景颜色
        // console.log(ev.target.parentElement)
        ev.target.parentElement.style.background = ''
    }

</script>
</html>

</body>
</html>